<%--
  Created by IntelliJ IDEA.
  User: 小陈同学
  Date: 2020/12/21
  Time: 21:17
  To change this template use File | Settings | File Templates.
--%>
<html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<head>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>注册</title>
    </head>
</head>
<style type="text/css">
    .logo{
        margin-left: 70px;
    }
    .main{
        background: #6dd4ff;
        margin-left: 70px;
        margin-top: 0px;
        margin-right: 50px;
        margin-bottom: 0px;
    }
    .body{ background: #8e8e8e}

</style>
<body style="overflow-x:hidden" background="Register.jsp" >
<div class="logo">
    <img src="images/123.png" alt="">
</div>
<div class="main">
    <form action="register">
        <table>
            <tbody>
            <tr>
                <td>用户名:</td>
                <td><input type="text" name="name" onblur="validName(this)" /></td>
                <td style="color:red;">
                    <span id="msg1" style="color:darkmagenta"></span>
                    *必填; 且必须是英文字母或数字, 长度3-15;
                </td>
            </tr>

            <tr>
                <td>密码：</td>
                <td><input type="password" name="password" onblur="validPassword(this)"/> </td>
                <td style="color:red;">
                    <span id="msg2" style="color:darkmagenta"></span>
                    *必填; 请输入密码，且长度6-15;
                </td>
            </tr>
            <tr>
                <td>确认密码：</td>
                <td><input type="password" name="rePassword" onblur="validRePassword(this)"/> </td>
                <td style="color:red;">
                    <span id="msg3" style="color:darkmagenta"></span>
                    *值要和密码框的值 相同
                </td>
            </tr>
            <tr>
                <td>真实姓名:</td>
                <td><input type="text" name="realName" onblur="validRealName(this)" /></td>
                <td style="color:red;">
                    <span id="msg4" style="color:darkmagenta"></span>
                    *必填；中文，2-10个字符。
                </td>
            </tr>
            <tr>
                <td>出生日期：</td>
                <td><input type="date" name="birthDate" onblur="validBirthDate(this)"/></td>
                <td style="color:red;">
                    <span id="msg5" style="color:darkmagenta"></span>
                    *选填，格式yyyy-mm-dd，按此日期算出的年龄应大于等于10岁。
                </td>
            </tr>
            <tr>
                <td>电子邮箱：</td>
                <td><input type="email" name="email" /></td>
                <td style="color:red;">
                    <span id="msg6" style="color:darkmagenta"></span>
                    *必填，且格式要正确，如果不正确则输入框周边为红色;//不用进行验证   因为类型为email
                </td>
            </tr>
            <tr>
                <td>电话号码：</td>
                <td><input type="tel" name="telephone" onblur="validTel(this)"/></td>
                <td style="color:red;">
                    <span id="msg7" style="color:darkmagenta"></span>
                    *选填，且是数字;
                </td>
            </tr>
            <tr>
                <td>地址：</td>
                <td><input type="text" name="address" onblur="validAdd(this)"/></td>
                <td style="color:red;">
                    <span id="msg8" style="color:darkmagenta"></span>
                    * 选填, 且长度不能大于100；
                </td>
            </tr>
            <tr>
                <td>邮编：</td>
                <td><input type="text" name="postcode" onblur="validPost(this)"/></td>
                <td style="color:red;">
                    <span id="msg9" style="color:darkmagenta"></span>
                    * 选填, 且是6位数字;
                </td>
            </tr>
            <tr>
                <td>请输入验证码:</td>
                <td><input type="text" name="vail"/></td>
                <td>
                    <img alt="验证码" src="vail" id="img"/><a href="javascript:void(0)" onclick="changeImg()">看不清？</a><input type="button" value="看不清？" onclick="changeImg()" id="btn"/>
                </td>
            </tr>
            <tr>
                <td colspan="3">
                    <input type="submit" value="注册"/>
                    <input type="reset" value="重置">
                    <input type="button" onclick="changeColor()" value="改变颜色"/>
                </td>
            </tr>
            </tbody>
        </table>
    </form>
</div>

</body>

<script type="text/javascript">
    function changeImg(){
        var btn=document.getElementById("btn");
        var img=document.getElementById("img");
        //防止验证码图片缓存
        img.src="/webwork/vail?tm"+new Date().getTime();
    }
    function changeColor() {
        document.body.style.backgroundColor="blue";
    }
    function validName(obj) {
        var txt = obj.value;
        var msg1=document.getElementById("msg1");
        if(txt.length==0){
            msg1.innerText="用户名不能为空";
        }
        else if(txt.length<3||txt.length>15){
            msg1.innerText="用户名长度必须是3-15";
        }
        else{
            //判断是否由数字或字母组成
            var reg=/^(?![0-9]+$)|(?![a-zA-Z]+$)|[0-9A-Za-z]$/;
            if( reg.test(txt)) {//
                msg1.innerText="用户名符合要求";
            }
            else{
                msg1.innerText="用户名必须由数字或字母组成";
            }
        }
    }
    var psd;
    function validPassword(obj) {
        psd = obj.value;
        var msg2=document.getElementById("msg2");

        if(psd.length==0){
            msg2.innerText="密码不能为空";
        }
        else if(psd.length<6||psd.length>15){
            msg2.innerText="密码长度必须是6-15";
        }
        else{
            msg2.innerText="密码符合要求";
        }

    }

    function validRePassword(obj) {
        var txt = obj.value;
        var msg3=document.getElementById("msg3");

        if(txt==psd&&txt!=null){
            msg3.innerText="确认密码符合要求";
        }
        else{
            msg3.innerText="确认密码必须与上述密码相同";
        }

    }
    function validRealName(obj) {
        var txt = obj.value;
        var msg4=document.getElementById("msg4");

        if(txt.length==0){
            msg4.innerText="真实姓名不能为空";
        }
        else if(txt.length<2||txt.length>10){
            msg4.innerText="真实姓名长度必须是2-10";
        }
        //判断必须是中文
        else{
            var reg = /[^/u4e00-u9fa5]/;
            if(reg.test(txt)){
                msg4.innerText="真实姓名符合要求";
            }
            else{
                msg4.innerText="真实姓名必须是中文";
            }
        }
    }

    function validBirthDate(obj) {
        //判断是否大于十岁
        // 获取当前时间
        var msg5=document.getElementById("msg5");
        var now=new Date();
        var nowYear=now.getFullYear();
        var nowMonth=now.getMonth()+1;
        var nowDate=now.getDate();

        //出生日期
        var txt=new Date(obj.value);
        var birthYear=txt.getFullYear();
        var birthMonth=txt.getMonth()+1;
        var birthDate=txt.getDate();

        var age  = nowYear - birthYear;
        msg5.append("1111");
        //当前月大于出生月，则岁数不足
        if(nowMonth < birthMonth){
            age = age -1;
        }else if(nowMonth == birthMonth){
            if(nowDate < birthDate){
                age = age -1;
            }
        }
        if(age>=10){
            msg5.innerText="年龄符合要求";
        }
        else{
            msg5.innerText="年龄小于10岁或年龄不符合要求";
        }
    }
    function validTel(obj) {
        var txt = obj.value;
        var msg7=document.getElementById("msg7");

        if(txt.length==0){
            msg7.innerText="";
        }
        //判断必须是数字
        else{
            var reg = /[^0-9]/;
            if(reg.test(txt)){
                msg7.innerText="电话号码必须是数字";
            }
            else{
                msg7.innerText="电话号码符合要求";
            }
        }
    }
    function validAdd(obj) {
        var txt = obj.value;
        var msg8=document.getElementById("msg8");

        if(txt.length==0){
            msg8.innerText="";
        }
        else if(txt.length>100){
            msg8.innerText="地址长度不能大于100";
        }
    }

    function validPost(obj) {
        var txt = obj.value;
        var msg9=document.getElementById("msg9");

        if(txt.length==0){
            msg9.innerText="";
        }
        //判断必须是数字
        else{
            var reg = /[^0-9]/;
            if(reg.test(txt)){
                msg9.innerText="邮编必须是数字";
            }
            else if(txt.length!=6){
                msg9.innerText="邮编必须是6位";
            }
            else{
                msg9.innerText="邮编符合要求";
            }
        }
    }

</script>

</html>
